<template>
	<view class="body">
		<xk-header title="受理维修"></xk-header>
		<view class="list" v-if="backMore">
			<view class="list-item header">
				<view>抽查退货</view>
				<image v-if="!backMore" src="/static/up.png"></image>
				<image v-else  src="/static/down.png"></image>
			</view>
			<view>
				<view class="list-item">
					<view>查验人</view>
					<view>黄玲</view>
				</view>
				<view class="list-item">
					<view>查验部门</view>
					<view>物管部</view>
				</view>
				<view class="list-item">
					<view>查验日期</view>
					<view>2021-05-20</view>
				</view>
				<view class="list-item">
					<view>查验结果</view>
					<view style="color: #FF3737;">退回</view>
				</view>
				<view class="list-item">
					<view>查验意见</view>
					<view style="color: #FF3737;">问题仍存在，维修不合格</view>
				</view>
				<view class="list-item">
					<view>备注</view>
					<view>无</view>
				</view>
			</view>
		</view>
		<view class="list" v-if="more">
			<view class="list-item header">
				<view>派工信息</view>
				<image v-if="!more" src="/static/up.png"></image>
				<image v-else  src="/static/down.png"></image>
			</view>
			<view>
				<view class="list-item">
					<view>工单编号</view>
					<view>XC202105190001</view>
				</view>
				<view class="list-item">
					<view>维修种类</view>
					<view>空调维修</view>
				</view>
				<view class="list-item">
					<view>空间区域</view>
					<view>1栋24层2401房</view>
				</view>
				<view class="list-item">
					<view>维修地点</view>
					<view>A1-7室外主机报故障H0</view>
				</view>
				<view class="list-item">
					<view>报修人</view>
					<view>陈丽芳</view>
				</view>
				<view class="list-item">
					<view>联系电话</view>
					<view>15219968756</view>
				</view>
				<view class="list-item">
					<view>报修时间</view>
					<view>2021-05-19 10:00</view>
				</view>
				<view class="list-item">
					<view>备注</view>
					<view>无</view>
				</view>
				<view class="list-item">
					<view>指派人</view>
					<view>组团工程前台</view>
				</view>
				<view class="list-item">
					<view>跟进人</view>
					<view>钟建成</view>
				</view>
				<view class="list-item">
					<view>指派时间</view>
					<view>2021-05-19 09:32:09</view>
				</view>
			</view>
		</view>
		<view class="list" v-if="orderMore">
			<view class="list-item header">
				<view>报修单号:  {{data.pm_service_repair.repair_id}}</view>
				<image v-if="!more" src="/static/up.png"></image>
				<image v-else  src="/static/down.png"></image>
			</view>
			<view  class="data-item">
				<view class="order-info">
					<view class="info-item"><view class="key">报修业主：</view>{{data.pm_service_repair.apply_user}}</view>
					<view class="info-item"><view class="key">物业编号：</view>{{data.pm_service_repair.property_code}}</view>
					<view class="info-item"><view class="key">报修设施：</view>{{data.pm_service_repair.buliding_no + data.pm_service_repair.storey_no + (data.pm_service_repair.repair_Address||"")}}</view>
					<view class="info-item"><view class="key">预约上门时间：</view>{{data.pm_service_repair.plan_date}}</view>
					<view class="info-item"><view class="key">报修描述：</view><text>{{data.pm_service_repair.repair_content}}</text></view>
					<!-- <view class="info-item error"><view class="key">异常记录：</view>墙壁表层脱落</view> -->
					<view class="info-item"><view class="key"></view>
						<view class="info-imgs">
							<image v-for="(item, index) of 6" :key="index" class="img-item" mode="aspectFill" src="/static/temp/temp.jpeg"></image>
						</view>
					</view>
					<picker mode="date" :value="planDate"
					 @change="dateChange">
						<view class="info-item">
							<view class="key not-null">按排上门日期：</view>
							<text class="date">{{planDate || "请选择"}}</text>
							<image mode="aspectFill" class="jiantou" src="/static/jiantou.png"/>
						</view>
					</picker>
					<picker mode="time" :value="planTime"
					 @change="timeChange">
						<view class="info-item">
							<view class="key not-null">按排上门时间：</view>
							<text class="date">{{planTime || "请选择"}}</text>
							<image mode="aspectFill" class="jiantou" src="/static/jiantou.png"/>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="common-bottom-view">
			<view class="common-btn"  v-if="orderMore" @click="startRepair">受理维修</view>
		</view>
		<view class="common-zw"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isInList: false,
				eventName: "",
				data: {},
				backMore: false,
				more: false,
				orderMore: false,
				planDate: "",
				planTime: ""
			};
		},
		onLoad(options) {

			if (options && options.isInList) {
				this.isInList = options.isInList
			}

			if (options && options.eventName) {
				this.eventName = options.eventName
			}
			if (options && options.data) {
				this.data = JSON.parse(options.data)
				console.warn("data: ", this.data)

				if (this.data.pm_service_repair.jd_status === "WAIT") {
					this.orderMore = true
				}
			}
		},
		methods:{
			dateChange(e) {
				if (this.planDate !== e.detail.value) {
					this.planDate = e.detail.value
				}
			},
			timeChange(e) {
				if (this.planTime !== e.detail.value) {
					this.planTime = e.detail.value
				}
			},
			startRepair(){
				if (!this.planDate) {
					this.$util.toast("请选择按排上门日期")
					return
				}
				if (!this.planTime) {
					this.$util.toast("请选择按排上门时间")
					return
				}
				this.$util.confirm({
					content: "确定要开始接单？",
					confirmText: "确定接单"
				}).then(isConfirm => {
					if (isConfirm) {
						this.$util.post({
							url: "pmServiceRepair/taking",
							data: {
								repair_id: this.data.pm_service_repair.repair_id,
								plan_date: this.planDate + " " + this.planTime	// 按排上门时间
							}
						}).then(res => {
							if (this.eventName) {
								this.$EventBus.$emit(this.eventName);
							}
							uni.redirectTo({
								url: '/pagesA/facility-repair/facility-repair-finish?isInList='+this.isInList
							})
						})

					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
.list {
	margin: 20rpx 30rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #333333;
		font-size: 28rpx;
		padding: 30rpx 20rpx;
		:first-child {
			color: #999999;
		}
	}
	.list-item2{
		font-size: 28px;
		color: #333333;
		display: flex;
		align-items: center;
		color: #333333;
		font-size: 28rpx;
		padding: 22rpx 20rpx;
		:first-child {
			width: 150rpx;
		}
	}
	.header{
		font-size: 32rpx;
		font-weight: bolder;
		color: #333333;
		:first-child {
			flex: 1;
			color: #333333;
		}
		image{
			width: 24rpx;
			height: 24rpx;
		}
	}
}
.data-item{
	// display: flex;
	// margin-bottom: 30rpx;
	padding: 0 20rpx 20rpx;
	.order-type{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #333333;
		text{
			font-weight: bolder;
		}
	}
	.order-info{
		margin: 20rpx 0;
		.info-item{
			display: flex;
			font-size: 28rpx;
			align-items: center;
			color: #333333;
			line-height: 50rpx;
			.key{
				min-width: 150rpx;
				font-size: 28rpx;
				color: #999999;
			}
			.not-null {
				margin: 10rpx 0rpx;
				color: #59A0FF;
			}
			.date {
				flex: 1;
			}
			.info-imgs{
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 10rpx;
				.img-item{
					width: 120rpx;
					height: 120rpx;
					margin: 2rpx 2rpx 0 0;
				}
			}
		}
		.error{
			color: #FF3737;
		}
	}
}
</style>
